<template>
	<el-drawer title="自定义配置项" size="480px" :wrapper-closable="false" destroy-on-close :visible.sync="drawer">
		<div class="custom_config_wrapper">
			<div class="content">
				<template v-if="configItemList.length > 0">
					<custom-item v-for="(item, index) in configItemList" :ref="`form${index}`" :key="index" :data="item">
						<el-button slot="delete" type="primary" icon="el-icon-delete" plain @click="handleDeleteItem(index)"></el-button>
					</custom-item>
				</template>
				<template v-else>
					<el-empty :image-size="200" description="暂无自定义配置项"></el-empty>
				</template>
				<el-button type="text" class="added" icon="el-icon-plus" @click="handleAddedItem()">添加项目</el-button>
			</div>
			<div class="button">
				<el-button size="medium" type="primary" :loading="submitLoading" @click="handleConfirmUpdate()">确定</el-button>
				<el-button size="medium" @click="drawer = false">取消</el-button>
			</div>
		</div>
	</el-drawer>
</template>

<script>
import lodash from 'lodash';
import customItem from './item';
import { updateConfig } from '@/api/system/tbSysConfig';
export default {
	components: { customItem },
	props: {
		value: { type: Boolean, default: false },
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			drawer: this.value,
			configItemList: [],
			submitLoading: false
		};
	},
	watch: {
		value(flag) {
			this.drawer = flag;
		},
		drawer(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.configItemList = [];
			if (this.$isJSON(this.data.filed22)) {
				this.configItemList = JSON.parse(this.data.filed22);
			}
		}
	},
	methods: {
		//判断是否验证
		async judgeValidPass() {
			let formRefs = Object.values(this.$refs);
			let formComps = formRefs.map((item) => {
				return !item[0] ? true : item[0].handleValidateForm();
			});
			let formVailds = await Promise.all(formComps);
			return !formVailds.some((n) => !n);
		},

		//添加项目
		async handleAddedItem() {
			let isPass = await this.judgeValidPass();
			if (!!isPass) {
				let itemObject = { title: '', field: '', type: '1', content: '' };
				this.configItemList.push(itemObject);
			}
		},

		//删除项目
		handleDeleteItem(index) {
			this.$delete(this.configItemList, index);
		},

		async handleConfirmUpdate() {
			let params = { id: this.data.id };
			let isPass = await this.judgeValidPass();
			if (!isPass) return false;
			if (this.configItemList.length > 0) {
				params['filed22'] = JSON.stringify(this.configItemList);
			} else {
				params['filed22'] = '';
			}
			this.submitLoading = true;
			this.updateConfigRequest(params);
		},

		//更新配置
		async updateConfigRequest(params) {
			let result = await updateConfig(params).then((res) => res.data);
			this.submitLoading = false;
			if (result.code === '0') {
				this.drawer = false;
				this.$emit('refresh');
				this.$store.dispatch('getSiteConfig');
				this.$message.success('更新自定义配置项成功');
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.custom_config_wrapper::v-deep {
	display: flex;
	flex-direction: column;
	height: 100%;
	.content {
		flex: 1;
		overflow: hidden;
		overflow-y: auto;
		.item {
			margin: 0 16px;
			padding: 16px 0;
			border-bottom: solid 1px #e4e7ed;
		}
		.el-empty__bottom {
			margin-top: 36px;
		}
		.el-button.added {
			width: 100%;
		}
	}
	.button {
		padding: 16px;
		flex-shrink: 0;
		overflow: hidden;
		text-align: right;
		border-top: solid 1px #dcdfe6;
	}
}
</style>
